<template>
    <div>
      <el-card class="box-card">
      <div slot="header" class="clearfix">
      <span><svg-icon icon-class="user" />个人信息</span>
      </div>
      <!-- <div class="text item">
      </div> -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item :label="$t('table.user_uid')">
          <div style="display:inline-block;width:300px;">
          <el-input v-model="form.uid" disabled></el-input>
          </div>
        </el-form-item>
        <el-form-item :label="$t('table.user_name')" prop="title">
          <div style="display:inline-block;width:300px;">
          <el-input v-model="form.username" disabled></el-input>
          </div>
        </el-form-item>
        <el-form-item  :label="$t('table.user_avatar_url')">
          <div style="display:inline-block;width:300px;">
            <el-button type="text" size="small" @click="showUpAvatar">更换头像
            </el-button>
            <my-upload field="img"
                @crop-success="cropSuccess"
                @crop-upload-success="cropUploadSuccess"
                @crop-upload-fail="cropUploadFail"
                v-model="upAvatarModal"
            :width="300"
            :height="300"
            url="/api/upload/avatar"
            :params="params"
            :headers="headers"
            :withCredentials="true"
            ></my-upload>
          <img :src="imgDataUrl">
          </div>
        </el-form-item>
        <el-form-item  :label="$t('table.user_password')">
          <div style="display:inline-block;width:300px;">
            <el-button type="text" size="small" @click="showEditPassword">修改密码</el-button>
          </div>
        </el-form-item>
        <el-form-item :label="$t('table.user_mobile_phone')">
          <div style="display:inline-block;width:300px;">
            <el-input v-model="form.user_mobile_phone" ></el-input>
           </div> 
        </el-form-item>
        <el-form-item :label="$t('table.user_email')">
          <div style="display:inline-block;width:300px;">
            <el-input v-model="form.user_email" ></el-input>
          </div>  
        </el-form-item>
        <el-form-item :label="$t('table.user_telephone')">
          <div style="display:inline-block;width:300px;">
            <el-input v-model="form.user_telephone" ></el-input>
          </div>  
        </el-form-item>
        <el-form-item :label="$t('table.user_address')">
          <div style="display:inline-block;width:300px;">
            <el-input v-model="form.user_address" ></el-input>
          </div>
        </el-form-item>
        <el-form-item :label="$t('table.user_department')">
          <div style="display:inline-block;width:300px;">
            <span>{{ form.department_name }}</span>
          </div>  
        </el-form-item>
        <el-form-item :label="$t('table.user_entry_time')">
          <div style="display:inline-block;width:300px;">
            <span>{{ form.user_entry_time | timeFilter('{y}-{m}-{d}') }}</span>
          </div>  
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
          <!-- <el-button>取消</el-button> -->
        </el-form-item>
      </el-form>
      </el-card>

    <el-dialog title="修改密码" :visible.sync="editPasswordModal">
        <el-form  ref="editPasswordForm" :model="editPasswordForm" label-width="70px" label-position="right" :rules="passwordValidate">
            <el-form-item label="原密码" prop="oldPass" :error="oldPassError">
                <el-input type="password" v-model="editPasswordForm.oldPass" placeholder="请输入现在使用的密码" ></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPass">
                <el-input type="password" v-model="editPasswordForm.newPass" placeholder="请输入新密码，至少6位字符" ></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="rePass">
                <el-input type="password" v-model="editPasswordForm.rePass" placeholder="请再次输入新密码" ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button type="primary" @click="cancelEditPass">取消</el-button>
            <el-button type="primary" :loading="savePassLoading" @click="saveEditPass">保存</el-button>
        </div>
    </el-dialog>
    </div>
</template>

<script>
import API from '@/utils/backend_api'
import myUpload from 'vue-image-crop-upload'
import { getToken } from '@/utils/auth' // 验权
import { mapGetters } from 'vuex'

export default {
  name: 'ownspace_index',
  data() {
    const valideRePassword = (rule, value, callback) => {
      if (value !== this.editPasswordForm.newPass) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    return {
      form: {
        uid: '',
        username: '',
        user_password: '',
        user_status: 'on',
        user_birthday_time: '',
        user_mobile_phone: '',
        user_email: '',
        user_telephone: '',
        user_address: '',
        user_weixin_no: '',
        user_gender: '0',
        user_entry_time: '',
        user_leave_time: '',
        department_id: '',
        user_avatar_url: '',
        user_note: ''
      },
      upAvatarModal: false,
      params: {
        token: '123456798',
        name: 'avatar'
      },
      headers: {
        Authorization: getToken(),
        smail: '*_~'
      },
      imgDataUrl: '',
      dialogPassVisible: false,
      editPasswordModal: false, // 修改密码模态框显示
      savePassLoading: false,
      oldPassError: '',
      identifyCodeRight: false, // 验证码是否正确
      hasGetIdentifyCode: false, // 是否点了获取验证码
      canGetIdentifyCode: false, // 是否可点获取验证码
      checkIdentifyCodeLoading: false,
      editPasswordForm: {
        oldPass: '',
        newPass: '',
        rePass: ''
      },
      passwordValidate: {
        oldPass: [
          { required: true, message: '请输入原密码', trigger: 'blur' }
        ],
        newPass: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, message: '请至少输入6个字符', trigger: 'blur' },
          { max: 32, message: '最多输入32个字符', trigger: 'blur' }
        ],
        rePass: [
          { required: true, message: '请再次输入新密码', trigger: 'blur' },
          { validator: valideRePassword, trigger: 'blur' }
        ]
      },
      rules: {
        // type: [{ required: true, message: 'type is required', trigger: 'change' }],
        // // timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
        // title: [{ required: true, message: 'title is required', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'uid'
    ])
  },
  components: {
    'my-upload': myUpload
  },
  filters: {
  },
  methods: {
    showUpAvatar() {
      this.upAvatarModal = true
    },
    init() {
      API.sys.get_login_user().then(response => {
        this.form = response.data
      }).catch(error => {
        console.log(error)
      })
    },
    save() {
      var data = {
        uid: this.form.uid,
        username: this.form.username,
        user_mobile_phone: this.form.user_mobile_phone,
        user_email: this.form.user_email,
        user_telephone: this.form.user_telephone,
        user_address: this.form.user_address
      }
      API.user.update(data).then((response) => {
        this.$notify({
          title: '成功',
          message: '保存成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    showEditPassword() {
      this.editPasswordModal = true
    },
    cancelEditPass() {
      this.editPasswordModal = false
    },
    saveEditPass() {
      this.$refs['editPasswordForm'].validate((valid) => {
        if (valid) {
          const data = { oldPass: this.editPasswordForm.oldPass, newPass: this.editPasswordForm.newPass }
          API.sys.update_pass(data).then((response) => {
            this.$notify({
              title: '成功',
              message: '更改密码成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    cropSuccess(imgDataUrl, field) {
      console.log('-------- crop success --------')
      this.imgDataUrl = imgDataUrl
    },
    cropUploadSuccess(jsonData, field) {
      console.log('-------- upload success --------')
      console.log(jsonData)
      var data = { uid: this.form.uid, user_avatar_url: jsonData.imgDataUrl }
      API.user.updateOwnInfo(data).then((response) => {
        this.$store.commit('SET_AVATAR', data.user_avatar_url)
      })
    },
    cropUploadFail(status, field) {
      console.log('-------- upload fail --------')
      console.log(status)
      console.log('field: ' + field)
    }

  },
  mounted() {
    this.init()
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100;
  }
</style>